<template>
<!--  在售达人分析 -->
  <div
    id="sale"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <template v-if="vipRootObj[8][42].owner">
      <section class="input_group mt_40">
        <input
          type="text"
          v-model="input01"
          placeholder="请输入关键词在结果中搜索"
          @keyup.enter="search_input()"
        />
        <div @click="search_input()">
          <img src="../../../assets/meng/search01.png" />
        </div>
      </section>
      <table class="table mt_20" ref="capture">
        <thead>
          <tr>
            <th>抖音号</th>
            <th>粉丝数</th>
            <th>
              近30天关联视频数
              <img
                src="@/assets/meng/up_down.png"
                v-if="order_by == 'asc' && sort == 'AwemeCount'"
              /><img
                src="@/assets/meng/no_up_down.png"
                v-else
                @click="sort_fun(true, 1)"
              /><img
                src="@/assets/meng/down_up.png"
                v-if="order_by == 'desc' && sort == 'AwemeCount'"
              /><img
                src="@/assets/meng/no_down_up.png"
                v-else
                @click="sort_fun(false, 1)"
              />
            </th>
            <th>
              近30天关联直播数
              <img
                src="@/assets/meng/up_down.png"
                v-if="order_by == 'asc' && sort == 'LiveCount'"
              /><img
                src="@/assets/meng/no_up_down.png"
                v-else
                @click="sort_fun(true, 2)"
              /><img
                src="@/assets/meng/down_up.png"
                v-if="order_by == 'desc' && sort == 'LiveCount'"
              /><img
                src="@/assets/meng/no_down_up.png"
                v-else
                @click="sort_fun(false, 2)"
              />
            </th>
            <th>总点赞数</th>
            <th>总评论数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in table_data01" :key="'table' + index">
            <td class="td01">
              <div>
                <img
                  class="pointer"
                  :src="item.logo"
                  @click="go_to_page01(item.author_id)"
                />
                <section>
                  <p class="dot pointer" @click="go_to_page01(item.author_id)">
                    {{ item.nickname }}
                  </p>
                  <p>行业：{{ item.category }}</p>
                </section>
              </div>
            </td>
            <td class="td02">{{ format_num(item.total_fans) }}</td>
            <td class="td03">{{ format_num(item.aweme_count) }}</td>
            <td class="td04">{{ format_num(item.live_count) }}</td>
            <td class="td05">{{ format_num(item.total_favorite) }}</td>
            <td class="td06">{{ format_num(item.total_comment) }}</td>
          </tr>
        </tbody>
      </table>
      <div
        v-loading="loading"
        v-if="!(table_data01.length < (page01 - 1) * 50)"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <p class="nothing" v-show="table_data01.length < (page01 - 1) * 50">
        我是有底线的～
      </p>
      <div class="empty" v-show="!loading && table_data01.length == 0">
          <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
      </div>
    </template>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <img :src="$global.staticUrl + 'image/egImg/sale.jpg'" class="egBgImg" />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip routerName="sale" :lowestVipNum="vipRootObj[8][42].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "sale",
  components: {},
  data() {
    return {
      permissions: 1,
      busy: false,
      loading: true,
      table_data01: [],
      page01: 1,
      input01: "",
      order_by: "desc", //   表格头部排序
      sort: "AwemeCount", //   表格头部排序
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    };
  },
  props: ["id"],
  computed: {
    listen_change() {
      const { input01, order_by, sort } = this;
      return { input01, order_by, sort };
    },
  },
  created() {
    if(this.vipRootObj[8][42].owner){
      this.get_data();
      this.$watch(
        "listen_change",
        this.debounce((newValue, oldValue) => {
          this.page01 = 1;
          this.table_data01 = [];
          this.get_data();
        }, 0)
      );
    }
  },
  methods: {
    //   表格头部排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.order_by = "asc";
      } else {
        this.order_by = "desc";
      }
      switch (parm02) {
        case 1:
          this.sort = "AwemeCount";
          break;
        case 2:
          this.sort = "LiveCount";
          break;
      }
    },
    get_data() {
      let that = this;
      this.loading = true;
      this.busy = true;
      this.$axios({
        method: "get",
        url: "/api/product/SearchProAuthor",
        params: {
          keyword: this.trimStr(that.input01),
          // pro_id: 20947783179,
          pro_id: that.id,
          order_by: that.order_by,
          sort: that.sort,
          size: 50,
          page: that.page01,
        },
      })
        .then((response) => {
          this.loading = false;
          if (response.data.code == 1003) {
            this.permissions = 0;
          }
          if (response.data.code == 0) {
            // console.log(response.data.data)
            this.page01 += 1;
            this.table_data01 = this.table_data01.concat(response.data.data);
            response.data.data.length < 50
              ? (this.busy = true)
              : (this.busy = false);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    loadMore: function () {
      if (this.loading == false) {
        this.get_data();
      }
    },
    search_input() {
      this.page01 = 1;
      this.table_data01 = [];
      this.get_data();
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${1}`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style scoped lang='less'>
table {
  thead {
    tr {
      th {
        white-space: normal !important;
      }
      > th:nth-child(1) {
        width: 300px;
      }
      > th:nth-child(2) {
        width: 14%;
      }
      > th:nth-child(3) {
      }
      > th:nth-child(4) {
      }
      > th:nth-child(5) {
        width: 14%;
      }
      > th:nth-child(6) {
        width: 14%;
      }
      > th:nth-child(7) {
      }
    }
    img {
      width: 5px;
      height: 10px;
      vertical-align: 0;
      margin-right: 2px;
      cursor: pointer;
    }
  }
  tbody {
    tr {
      .td01 {
        padding-left: 20px;
        > div {
          font-family: PingFangSC-Regular;
          display: flex;
          align-items: center;
          img {
            margin-right: 13px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
          section {
            text-align: left;
            > p:nth-child(1) {
              display: block;
              max-width: 200px;
              font-size: 16px;
              font-weight: 600;
              color: #222222;
            }
            > p:nth-child(2) {
              margin-top: 5px;
              font-size: 14px;
              color: #555555;
              white-space: nowrap;
            }
          }
        }
      }
      td {
        font-family: DINAlternate-Bold;
        font-size: 16px;
        color: #222222;
        height: 80px;
        text-align: center;
      }
    }
  }
}
.input_group {
  display: inline-block;
  position: relative;
  width: 308px;
  height: 32px;
  border-radius: 4px 4px 4px 4px;
  border: solid 1px #e5e5e5;
  box-sizing: border-box;
  input {
    width: 100%;
    font-size: 14px;
    vertical-align: -1px;
    background-color: #f5f5f5;
    height: 100%;
    box-sizing: border-box;
    padding-left: 11px;
    padding-right: 38px;
    border: none;
  }
  > div {
    position: absolute;
    right: 0;
    cursor: pointer;
    top: -1px;
    text-align: center;
    width: 38px;
    height: 32px;
    background-color: #1779ff;
    border-radius: 0px 4px 4px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 15px;
    }
  }
}
#sale {
}
</style>